<div id="credentials" class="tab" style="display:none;">
    <div class="w3-padding">
        <div class="w3-third w3-border" style="width:33%; height:85vh; overflow:scroll;">
            <%for(let credential of credentials) {%>
                <a onclick="showDiv('<%=credential.referent%>', 'credentialsClass')">
                    <div class="w3-bar w3-btn w3-white w3-border" style="width:100%;">
                        <svg class="w3-bar-item" width="70" height="70" data-jdenticon-value="<%=credential.cred_def_id%>"></svg>
                        <p class="w3-bar-item"><%=credential.schema_id.split(':')[2]%> <%=credential.schema_id.split(':')[3]%></p>
                    </div>
                </a>
                <br>
            <%}%>
        </div>
        <%for(let credential of credentials) {%>
            <div id="<%=credential.referent%>" class="w3-padding credentialsClass" style="float:left;width:66%;display:none;">
                <div class="w3-border w3-container" style="margin:50px 50px;">
                    <div class="w3-cell-middle" style="display: block;margin: auto;">
                        <svg width="150" height="150" data-jdenticon-value="<%=credential.cred_def_id%>"></svg>
                    </div>
                    <div class="w3-cell" style="display: block;margin: auto;">
                        <h4><%=credential.schema_id.split(':')[2]%> <%=credential.schema_id.split(':')[3]%></h4>
                        <%for(let attr of Object.keys(credential.attrs).sort()) {%>
                        <p style="text-align: left"><%=attr%>: <%=credential.attrs[attr]%></p>
                        <%}%>
                    </div>
                </div>
            </div>
        <%}%>
    </div>
    <!--<button onclick="document.getElementById('sendCredModel').style.display='block'" class="w3-btn w3-white w3-border">Start</button>-->
</div>